extends ../_layout

block active
  - sidebar_active = 'form-wizard.html'

block content
  h3 Form Wizard
  .panel.panel-default
    .panel-heading Basic Form (jquery.validate)
    .panel-body
      form#example-form(action='#')
        div
          h4 Account
            br
            small Nam egestas, leo eu gravida tincidunt
          fieldset
            label(for='userName') User name *
            input.form-control#userName.required(name='userName', type='text')
            label(for='password') Password *
            input.form-control#password.required(name='password', type='text')
            label(for='confirm') Confirm Password *
            input.form-control#confirm.required(name='confirm', type='text')
            p (*) Mandatory
          h4 Profile
            br
            small Nam egestas, leo eu gravida tincidunt
          fieldset
            label(for='name') First name *
            input.form-control#name.required(name='name', type='text')
            label(for='surname') Last name *
            input.form-control#surname.required(name='surname', type='text')
            label(for='email') Email *
            input.form-control#email.required.email(name='email', type='text')
            label(for='address') Address
            input.form-control#address(name='address', type='text')
            p (*) Mandatory
          h4 Hints
            br
            small Nam egestas, leo eu gravida tincidunt
          fieldset
            p.lead.text-center Almost there!
          h4 Finish
            br
            small Nam egestas, leo eu gravida tincidunt
          fieldset
            p.lead One last check
            .checkbox.c-checkbox
              label
                input(type='checkbox', required="required", name="terms")
                span.fa.fa-check
                | I agree with the Terms and Conditions.
              
            

  .panel.panel-default
    .panel-heading Basic Vertical Example
    .panel-body
      #example-vertical
        h4 Keyboard
        section
          p Try the keyboard navigation by clicking arrow left or right!
        h4 Effects
        section
          p Wonderful transition effects.
        h4 Pager
        section
          p The next and previous buttons help you to navigate through your content.

block vendor_js
  // JQUERY VALIDATE
  script(src='../vendor/jquery-validation/dist/jquery.validate.js')
  // JQUERY STEPS
  script(src='../vendor/jquery.steps/build/jquery.steps.js')
  // Demo
  script(src='js/demo/demo-wizard.js')


